<script setup>
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import { watch, reactive, onMounted, onUnmounted } from 'vue';
  import { GetEvaluatePdfReport } from '@/api/exdoctor/mixAppraise'
  const appRoute = useRoute()

  const pdfData = reactive({
    percent: 0,
    text: '正在生成诊断报告文件，请稍后',
    textSuffix: '...',
    finishText: '诊断报告生成成功!',
    finishFail: false,
    failMsg: '',
    reportName: '',
    reportUrl: '',
    finished: false,
  })

  const refreshTextTimer =  null

  const getOverview = () => {
    const params = {
      fn: appRoute.query.fn,
      start: appRoute.query.start,
      end: appRoute.query.end
    }
    pdfData.finished = false
    pdfData.finishFail = false
    GetEvaluatePdfReport(params.fn, params.start, params.end).then((res) => {
      pdfData.reportName = res.data.pdf_name
      pdfData.reportUrl = res.data.pdf_file
      pdfData.finished = true
    }).catch((err) => {
      if (err && err.message) {
        pdfData.failMsg = err.message
      }
      pdfData.finishFail = true
    })
  }

  const toOpenReport = () => {
    // console.log(11, pdfData.reportName, pdfData.reportUrl)
    if (!pdfData.reportName || !pdfData.reportUrl) {
      return
    }
    window.open(pdfData.reportUrl, '_blank')
  }

  const watchRouteTs = watch(() => appRoute.query._ts, () => {
    getOverview()
  }, { immediate: true})

  onBeforeRouteLeave(() => {
    watchRouteTs()
  })
  onMounted(() => {
    setInterval(() => {
      if (pdfData.textSuffix.length >= 3) {
        pdfData.textSuffix = ''
      } else {
        pdfData.textSuffix = pdfData.textSuffix + '.'
      }
    }, 700)
  })
  onUnmounted(() => {
    if (refreshTextTimer) {
      clearInterval(refreshTextTimer)
    }
  })
</script>
<template>
  <div>
    <div class="view-content">
      <div class="status-finish">
        <span v-if="pdfData.finished">{{ pdfData.finishText }}</span>
        <span v-else>
          <span v-if="pdfData.finishFail" class="fail-text">
            <div>诊断报告生成失败，请重新尝试...</div>
            <div class="fail-msg">{{ pdfData.failMsg }}</div>
          </span>
          <span v-else>{{ pdfData.text }}{{ pdfData.textSuffix }}</span>
        </span>
      </div>
      <div v-if="pdfData.finished" class="file-addr">
        <el-icon size="40">
          <svg-icon name="pdf-file"></svg-icon>
        </el-icon>
        <div>{{ pdfData.reportName }}</div>
      </div>
      <div  v-if="pdfData.finished" class='down-btn'>
        <div class="btn" @click="toOpenReport">
          立即查看
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .view-content {
    padding-top: 100px;
    text-align: center;
    .status-text {
      margin: 30px 0;
      font-size: 22px;
    }
    .status-finish {
      margin: 50px 0;
      font-size: 22px;
      color: #2cad64;
      .fail-text {
        color: #e94242;
        .fail-msg {
          font-size: 18px;
          color: #0094ff;
          line-height: 40px;

        }
      }
    }
    .file-addr {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0 30px 0;
      .el-icon {
        margin-right: 10px;
      }
    }
    .down-btn{
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn {
        width: 100px;
        height: 40px;
        background-color: #2cad64;
        line-height: 40px;
        border-radius: 4px;
        cursor: pointer;
        // user-select: none;
      }
    }
  }
</style>
